<template>
	<div>
		<mj-title type="h2" title="Badge 徽标数"></mj-title>
		<div class="page-desc">主要用于通知未读数的角标，提醒用户点击。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-badge :value="12">
					<mj-button>评论</mj-button>
				</mj-badge>
				<mj-badge :value="2" style="margin-left:50px;">
					<span>回复</span>
				</mj-badge>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;mj-badge :value="12">
    &lt;mj-button>评论&lt;/mj-button>
  &lt;/mj-badge>
  &lt;mj-badge :value="2">
    &lt;mj-button>回复&lt;/mj-button>
  &lt;/mj-badge>
&lt;/template>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="最大值"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
			     <mj-badge :value="220" :max="99">
			        <mj-button>回复</mj-button>
			     </mj-badge>
			     <mj-badge :value="220" :max="9" style="margin-left:50px;">
			        回复
			     </mj-badge>
			     <mj-divider>可自定义最大值，当value为Number时</mj-divider>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-badge :value="220" :max="99">
       &lt;mj-button>回复&lt;/mj-button>
    &lt;/mj-badge>
    &lt;mj-badge :value="220" :max="9">回复&lt;/mj-badge>
&lt;/template>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="小圆点"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
			     <mj-badge :value="220" :dot="true">
			        <mj-button>回复</mj-button>
			     </mj-badge> 
			     <mj-badge :value="220" :dot="true" style="margin-left:50px;">
			        评论
			     </mj-badge>
			     <mj-divider>以红点的形式标注需要关注的内容</mj-divider>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;mj-badge :value="220" :dot="true">
  &lt;mj-button>回复&lt;/mj-button>
  &lt;/mj-badge> 
  &lt;mj-badge :value="220" :dot="true">评论&lt;/mj-badge>
&lt;/template>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="自定义内容"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				 <mj-badge value="hot">
				    <mj-button>评论</mj-button>
				 </mj-badge>
				 <mj-badge value="new" style="margin-left:50px;">
				    <mj-button>回复</mj-button>
				 </mj-badge>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;mj-badge value="hot">
    &lt;mj-button>评论&lt;/mj-button>
  &lt;/mj-badge>
  &lt;mj-badge value="new">
    &lt;mj-button>回复&lt;/mj-button>
  &lt;/mj-badge>
&lt;/template>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="多彩徽标"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-divider>预设：</mj-divider>
				<mj-badge color="primary" text="primary" />
				<br>
				<mj-badge color="success" text="success" />
				<br>
				<mj-badge color="normal" text="normal" />
				<br>
				<mj-badge color="info" text="info" />
				<br>
				<mj-badge color="error" text="error" />
				<br>
				<mj-badge color="warning" text="warning" />
				<br>
				<mj-badge color="blue" text="blue" />
				<br>
				<mj-badge color="green" text="green" />
				<br>
				<mj-badge color="red" text="red" />
				<br>
				<mj-badge color="yellow" text="yellow" />
				<br>
				<mj-badge color="pink" text="pink" />
				<br>
				<mj-badge color="orange" text="orange" />
				<br>
				<mj-badge color="cyan" text="cyan" />
				<br>
				<mj-divider>自定义：</mj-divider>
				<mj-badge color="#2db7f5" text="#2db7f5" />
				<br>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;mj-divider>预设：&lt;/mj-divider>
  &lt;mj-badge color="primary" text="primary" />
  &lt;br>
  &lt;mj-badge color="success" text="success" />
  &lt;br>
  &lt;mj-badge color="normal" text="normal" />
  &lt;br>
  &lt;mj-badge color="info" text="info" />
  &lt;br>
  &lt;mj-badge color="error" text="error" />
  &lt;br>
  &lt;mj-badge color="warning" text="warning" />
  &lt;br>
  &lt;mj-badge color="blue" text="blue" />
  &lt;br>
  &lt;mj-badge color="green" text="green" />
  &lt;br>
  &lt;mj-badge color="red" text="red" />
  &lt;br>
  &lt;mj-badge color="yellow" text="yellow" />
  &lt;br>
  &lt;mj-badge color="pink" text="pink" />
  &lt;br>
  &lt;mj-badge color="orange" text="orange" />
  &lt;br>
  &lt;mj-badge color="cyan" text="cyan" />
  &lt;br>
  &lt;mj-divider>自定义：&lt;/mj-divider>
  &lt;mj-badge color="#2db7f5" text="#2db7f5" />
&lt;/template>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="预设颜色"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
			    <mj-badge :value="5" type="primary">
			        <a href="#" class="demo-badge"></a>
			    </mj-badge>
			    <mj-badge :value="5" type="success">
			        <a href="#" class="demo-badge"></a>
			    </mj-badge>
			    <mj-badge :value="5" type="normal">
			        <a href="#" class="demo-badge"></a>
			    </mj-badge>
			    <mj-badge :value="5" type="info">
			        <a href="#" class="demo-badge"></a>
			    </mj-badge>
			    <mj-badge :value="5" type="error">
			        <a href="#" class="demo-badge"></a>
			    </mj-badge>
			    <mj-badge :value="5" type="warning">
			        <a href="#" class="demo-badge"></a>
			    </mj-badge>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-badge :value="5" type="primary">
        &lt;a href="#" class="demo-badge">&lt;/a>
    &lt;/mj-badge>
    &lt;mj-badge :value="5" type="success">
        &lt;a href="#" class="demo-badge">&lt;/a>
    &lt;/mj-badge>
    &lt;mj-badge :value="5" type="normal">
        &lt;a href="#" class="demo-badge">&lt;/a>
    &lt;/mj-badge>
    &lt;mj-badge :value="5" type="info">
        &lt;a href="#" class="demo-badge">&lt;/a>
    &lt;/mj-badge>
    &lt;mj-badge :value="5" type="error">
        &lt;a href="#" class="demo-badge">&lt;/a>
    &lt;/mj-badge>
    &lt;mj-badge :value="5" type="warning">
        &lt;a href="#" class="demo-badge">&lt;/a>
    &lt;/mj-badge>
&lt;/template>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Badge 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>value</td>
            		<td>显示值</td>
            		<td>String | Number</td>
            		<td>-</td>
            	</tr>
            	<tr>
            		<td>max</td>
            		<td>最大值，value为Number有效</td>
            		<td>Number</td>
            		<td>-</td>
            	</tr>
            	<tr>
            		<td>dot</td>
            		<td>显示小圆点</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
            	<tr>
            		<td>color</td>
            		<td>设置更多状态点的颜色或自定义颜色</td>
            		<td>String</td>
            		<td>-</td>
            	</tr>
            	<tr>
            		<td>text</td>
            		<td>自定义内容，设置<code>color</code>属性后可用，也可不设置，只显示状态点</td>
            		<td>String</td>
            		<td>-</td>
            	</tr>
            </tbody>
        </table>
	</div>
</template>

<style scoped>
.demo-badge {
    width: 42px;
    height: 42px;
    background: #eee;
    border-radius: 6px;
    display: inline-block;
}
.mj-badge + .mj-badge {margin-left: 15px;}
</style>

